<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <div class="layui-form layuimini-form">
            <div class="layui-form-item">
                <label class="layui-form-label">登录用户名</label>
                <div class="layui-input-block">
                    <input disabled type="text" name="username" class="layui-input layui-disabled">
                    <tip>账号创建后，登录用户名不允许修改</tip>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">输入旧密码</label>
                <div class="layui-input-block">
                    <input type="password" name="old_password" autocomplete="off" maxlength="20" lay-verify="required"
                        lay-reqtext="旧密码不能为空" placeholder="请输入旧密码" class="layui-input">
                    <tip>请输入旧密码来验证当前操作是用户本人。</tip>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">输入新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="new_password" autocomplete="off" maxlength="20"
                        lay-verify="required|password" lay-reqtext="新密码不能为空" placeholder="请输入新密码" class="layui-input">
                    <tip>密码必须包含大写字母、小写字母、数字，且长度8-20位。</tip>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">重复新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="again_password" autocomplete="off" maxlength="20" lay-verify="required"
                        lay-reqtext="请重复输入新密码" placeholder="请重复输入新密码" class="layui-input">
                    <tip>请重复输入新密码，以确认没有输入失误。</tip>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="saveBtn">确认修改</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use([], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            http = layui.http,
            form = layui.form,
            miniPage = layui.miniPage;

        //显示用户名
        $("[name='username']").val($('.layui-nav-user').attr('data-username'));

        //输入验证
        form.verify({
            password: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!/^\S{8,20}$/.test(value)) {
                    return '密码长度应为8-20位';
                }
                if (!/[A-Z]/.test(value)) {
                    return '密码必须包含大写字母';
                }
                if (!/[a-z]/.test(value)) {
                    return '密码必须包含小写字母';
                }
                if (!/[0-9]/.test(value)) {
                    return '密码必须包含数字';
                }
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            if (data.field.old_password == data.field.new_password) {
                layer.msg('新密码不能与旧密码相同！', { icon: 5, shift: 6 });
                return false;
            }
            if (data.field.new_password != data.field.again_password) {
                layer.msg('两次输入新密码不一致！', { icon: 5, shift: 6 });
                return false;
            }
            http.ajaxPost('/admin/Admin/modifyPassword', data.field, function (data) {
                layer.msg('修改成功', { time: 1000 }, function () {
                    var r = new Date().getTime();
                    miniPage.hashChange('pages/admin_password.html?r=' + r);
                });
            });
        });

    });
</script>